<template>
    <div class="padding20">
        <!--列表页-->
        <div v-show="showList">
            <!--条件查询-->
            <el-form :model="queryParam" label-position="left" size="small" @submit.native.prevent>
                <el-row :gutter="50" justify="start">
                    <el-col :xs="12" :sm="7">
                        <el-form-item label="企业名称:" label-width="80px">
                            <el-input v-model="queryParam.name" placeholder="企业名称" @keyup.enter.native="selectPage"
                                      clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="7">
                        <el-form-item label="企业账号:" label-width="80px">
                            <el-input v-model="queryParam.userAccount" placeholder="企业账号"
                                      @keyup.enter.native="selectPage"
                                      clearable/>
                        </el-form-item>
                    </el-col>
                    <!--展开/收起-->
                    <el-col :xs="showMoreSearch?24:13" :sm="showMoreSearch?24:7">
                        <div style="float: left;overflow: hidden;">
                            <el-button size="small" @click="selectPage" type="primary">查询</el-button>
                            <el-button size="small" @click="clearParam">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <!--操作按钮-->
            <div class="mi-container">
                <el-button size="mini" class="mi-item" type="primary" icon="el-icon-plus"
                           @click="show('add')">新增企业账号
                </el-button>
            </div>

            <!--表格数据-->
            <el-table empty-text="当前条件下，暂无匹配数据"
                      :data="tableData"
                      border fit style="width: 100%;"
                      highlight-current-row show-overflow-tooltip
                      @selection-change="selectionChange">
                <!--                <el-table-column type="selection" width="55" align="center"/>-->
                <el-table-column type="index" label="序号" width="80" align="center"/>
                <el-table-column label="企业名称" prop="name" align="center"/>
                <el-table-column label="企业账号" prop="userAccount" align="center"/>
                <!--                <el-table-column label="公司信息" prop="companyContent" align="center">-->
                <!--                    <template slot-scope="scope">-->
                <!--                        <span>{{scope.row.companyContent | companyContentFilter}}</span>-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
                <el-table-column label="企业性质" prop="unitType" align="center">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.unitType">暂无数据</span>
                        <el-tag v-else class="rit5" v-for="tag in split(scope.row.unitType)">
                            {{tag}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="行业类别" prop="industryName" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.industryName | nullFilter}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="230" align="center">
                    <template slot-scope="scope">
                        <el-button plain size="mini" @click="show('info',scope.row)">
                            详情
                        </el-button>
                        <el-button type="success" plain size="mini" @click="show('update',scope.row)">
                            编辑
                        </el-button>
                        <el-dropdown @command="handleCommand($event,scope.$index, scope.row)" style="margin-left: 10px">
                            <el-button type="primary" plain size="mini">
                                更多<i class="el-icon-arrow-down el-icon--right"/>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="inWork">员工基本情况</el-dropdown-item>
                                <el-dropdown-item command="statistics">用人单位招聘信息</el-dropdown-item>
                                <el-dropdown-item command="dynamicHuman">动态人力资源信息</el-dropdown-item>
                                <el-dropdown-item command="resetPassword">修改密码</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页插件-->
            <Pagination @pagination="selectPage"
                        v-show="pageParam.pages>0"
                        :total-data-num="pageParam.total"
                        :current-page="pageParam.current"
                        :page-size="pageParam.size"/>
        </div>

        <!--修改-->
        <!--        <transition name="el-fade-in">-->
        <!--            <CompanyGEdit v-if="showEdit" :mData="viewData" :option="viewOption" @close="close"/>-->
        <!--        </transition>-->

        <!--详情-->
        <transition name="el-fade-in">
            <CompanyGInfo v-if="showInfo" :mData="viewData" :option="viewOption" @close="close"/>
        </transition>

        <!--新增企业账号-->
        <!--        <transition name="el-fade-in">-->
        <!--            <AddCompany v-if="showAdd" :data="viewData" :option="viewOption" @close="close"/>-->
        <!--        </transition>-->

        <el-dialog title="新增企业账号" :visible.sync="showDialog"
                   :close-on-press-escape="false" :close-on-click-modal="false"
                   style="margin-bottom: 10px;">
            <el-form :model="data" :rules="mRules" ref="form" label-width="80px">
                <el-form-item label="企业名称" prop="name">
                    <el-input v-model="data.name" placeholder="暂无数据"/>
                </el-form-item>
                <el-form-item label="企业账号" prop="userAccount">
                    <el-input v-model="data.userAccount" placeholder="暂无数据"/>
                </el-form-item>
                <el-form-item label="企业密码" prop="password">
                    <el-input type="password" v-model="data.password" placeholder="暂无数据"/>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <!--添加按钮-->
                <el-button size="medium" @click="showDialog=false">取 消</el-button>
                <el-button type="primary" plain size="medium" @click="insertCompany()">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import {API} from "@/core/api/API";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Pagination from "@/components/Pagination/Pagination.vue";
    import Kit from "@/core/mixin/Kit";
    import $http from "@/core/utils/http";
    import AddCompany from "@/views/government/company/company-info/AddCompany.vue";
    import CompanyGEdit from "@/views/government/company/company-info/edit.vue";
    import CompanyGInfo from "@/views/government/company/company-info/info.vue";
    import {MessageBox} from "element-ui";
    import {rule} from "@/core/utils/rule";
    import {ElForm} from "element-ui/types/form";
    import {errorMsg, successMsg} from "@/core/utils/message";

    @Component({
        name: 'CompanyGList',
        components: {
            Pagination,
            CompanyGEdit,
            CompanyGInfo,
            AddCompany,
        },
    })
    export default class CompanyGList extends mixins(BaseVue, Kit) {


        /**
         * 处理Dialog添加企业账号
         */
        showDialog = false;
        mRules = {
            password: [rule.notNullBlur("企业面不能为空"), rule.password],
            userAccount: [rule.notNullBlur("企业账号不能为空"), rule.account],
            name: [rule.notNullBlur("企业名称不能为空"), rule.length(1, 50)],
        };
        data: any = {};

        //添加企业信息
        insertCompany() {
            (this.$refs.form as ElForm).validate().then(() => {
                this.data.paramRoleIds = this.data.roleIds;
                $http.post(API.companyInfoInsert, this.data).then((res: any) => {
                    if (res.success) {
                        this.selectPage();
                        successMsg("企业账号添加完成,请完善企业信息");
                        this.go("CompanyGEdit", res.data)
                    }
                });
            },).catch(() => {
                errorMsg("表单内容填写错误，请检查！");
            });
        }


        //初始化
        async mounted() {
            this.selectPage();
        }

        //查询分页
        selectPage(page: any = null) {
            this.pageData(API.companyInfoPage, page)
                .then((res: any) => {
                })
        }


        //处理更多按钮事件
        async handleCommand(command: any, index: any, row: any) {
            let isOk = await this.checkCompany(row.userId)
            let data = {id: row.id, userId: row.userId, userAccount: row.userAccount};
            switch (command) {
                //重置密码
                case "resetPassword":
                    this.resetPassword(row);
                    break;

                // 动态人力资源信息
                case "dynamicHuman":
                    if (!isOk) {
                        this.showAlert(row.userId, row.userAccount);
                    } else {
                        this.go("DynamicHumanGEdit", data);
                    }
                    // this.go("DynamicHumanGList", {id: row.id, userId: row.userId, userAccount: row.userAccount});
                    break;

                // 员工基本情况
                case "inWork":
                    if (!isOk) {
                        this.showAlert(row.userId, row.userAccount);
                    } else {
                        this.go("InWorkHumanGEdit", data);
                    }
                    // this.go("InWorkHumanGList", {id: row.id, userId: row.userId, userAccount: row.userAccount});
                    break;

                // 用人单位招聘信息统计
                case "statistics":
                    if (!isOk) {
                        this.showAlert(row.userId, row.userAccount);
                    } else {
                        this.go("RecruitInfoEdit", data);
                    }
                    break;
            }
        }

        showAlert(userId: any, account: any) {
            MessageBox.alert("该企业信息未填写完整，请前往填写", "提示", {
                confirmButtonText: '确定',
                type: 'warning',
                callback: (action: any) => {
                    this.go("CompanyGEdit", {userId: userId, account: account})
                }
            });
        }

        checkCompany(userId: any) {
            return $http.post(API.validateInfoByUserId, {id: userId}).then((res: any) => {
                if (res.success) {
                    if (res.data) {
                        return true;
                    } else {
                        return false;
                    }
                } else {
                    return true;
                }
            })
        }

        //重置密码
        resetPassword(row: any) {
            this.$prompt("请输入新密码", "修改密码", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                closeOnClickModal: false,
                inputPattern: /^[a-zA-Z0-9.]{8,16}$/,
                inputErrorMessage: '请输入密码8到16位,可以包含（字母，数字，下划线）'
            }).then((val: any) => {
                //执行修改密码
                $http.post(API.companyInfoResetPassword, {
                    account: row.userAccount,
                    password: val.value
                }).then((res: any) => {
                    if (res.success) {
                        this.$alert("密码已成功修改为: " + val.value, '修改密码成功', {
                            confirmButtonText: '确定'
                        });
                    }
                });
            }).catch(() => {

            });
        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }

        showEdit = false;
        showAdd = false;

        //切换视图
        show(type: any, data: any = {}) {
            //赋值
            this.viewData = data;
            this.viewOption.type = type;

            //修改
            if (type == "add") {
                this.showDialog = true;
                // this.viewOption.title = '新增企业账号';
                // this.showAdd = true;
                // this.showList = false;
            }


            //新增
            if (type == "insert") {
                this.viewOption.title = '新增分类';
                this.showEdit = true;
                this.showList = false;
            }

            //修改
            if (type == "update") {
                // this.viewOption.title = '企业信息编辑';
                // this.showEdit = true;
                // this.showList = false;
                this.go("CompanyGEdit", this.viewData)
            }

            //修改
            if (type == "info") {
                this.viewOption.title = '企业信息详情';
                this.showInfo = true;
                this.showList = false;
            }

        }

        //视图关闭回调
        close(obj: any = {}) {
            this.showAdd = false;
            this.showInfo = false;
            this.showEdit = false;
            setTimeout(() => {
                this.showList = true;
                if (obj.refresh) {
                    this.selectPage();
                }
            }, 200);
        }
    }

</script>

<style scoped type="scss">
</style>
